How to set status bar style
Table of Contents
Globally
If you want to change the status bar style to all of your view controllers, you can do it globally with the help of Info.plist.
The default color of the status bar is black text.
![Default status bar](/images/status-bar-default.png)
To change the status bar to white:
- Open you Info.plist.
- Add View controller-based status bar appearance key (
UIViewControllerBasedStatusBarAppearance
) and set value to No (false
). - Add Status bar style key (
UIStatusBarStyle
) and set value to Light Content (UIStatusBarStyleLightContent
).
![Light Content status bar style](/images/status-bar-light-content.png)
Status bar style | Value | Status bar text color |
---|---|---|
Default | UIStatusBarStyleDefault | Automatically chooses light or dark content based on the user interface style. Black text when traitCollection.userInterfaceStyle = UIUserInterfaceStyle.light and white text when traitCollection.userInterfaceStyle = UIUserInterfaceStyle.dark |
Dark Content | UIStatusBarStyleDarkContent | Black text, intended for use on light backgrounds |
Light Content | UIStatusBarStyleLightContent | White text, intended for use on dark backgrounds |
These two flags are from the old days of iOS, and the use case is quite limited. You can just set and forget, there is no way to change this afterward, so if your app has a different status bar style for some view controller, you might have to consider other methods. For a simple app, this might be what you are looking for.
You can easily support sarunw.com by checking out this sponsor.
![Offline Transcription:](/images/sponsor/icon_256x256.png)
Offline Transcription: Fast, privacy-focus way to transcribe audio, video, and podcast files. No data leaves your Mac.
Style based on view controllers
By default, the status bar style will respect the view controller instance property, preferredStatusBarStyle
. You just need to override preferredStatusBarStyle
property in a view controller that you want to change the status bar style to return the style you want.
override var preferredStatusBarStyle: UIStatusBarStyle {
return .lightContent
}
The above example will set status bar text color to white.
![preferredStatusBarStyle = .lightContent](/images/status-bar-prefer.png)
Style based on condition
If you need to change the status bar style dynamically, e.g., you want it to change based on the scrollable content, you can do that with the same property, preferredStatusBarStyle
.
var preferredStatusBarStyle: UIStatusBarStyle
Since preferredStatusBarStyle
is a get-only property, you can't set the style directly, but you can control it with a help of simple variable and setNeedsStatusBarAppearanceUpdate()
method.
var isDarkContentBackground = false // <1>
func statusBarEnterLightBackground() { // <2>
isDarkContentBackground = false
setNeedsStatusBarAppearanceUpdate()
}
func statusBarEnterDarkBackground() { // <3>
isDarkContentBackground = true
setNeedsStatusBarAppearanceUpdate() <4>
}
override var preferredStatusBarStyle: UIStatusBarStyle {
if isDarkContentBackground { // <5>
return .lightContent
} else {
return .darkContent
}
}
<1> We declare a new variable to dictate current background color.
<2> A function to call when scrollable content under status bar become ligth. We simply set isDarkContentBackground
to false
.
<3> A function to call when scrollable content under status bar become dark. We set isDarkContentBackground
to true
.
<4> You need to call setNeedsStatusBarAppearanceUpdate()
to notify the system that the value from preferredStatusBarStyle
has changed.
<5> We return a status bar style based on isDarkContentBackground
value.
![Change status bar style based on variable](/images/status-bar-no-animation.gif)
And If you call the setNeedsStatusBarAppearanceUpdate()
method within an animation block, the changes will be animated along with the rest of the animation block and produce a nice fading effect.
func statusBarEnterLightBackground() { //
isDarkContentBackground = false
UIView.animate(withDuration: 0.3) {
self.setNeedsStatusBarAppearanceUpdate()
}
}
func statusBarEnterDarkBackground() { //
isDarkContentBackground = true
UIView.animate(withDuration: 0.3) {
self.setNeedsStatusBarAppearanceUpdate()
}
}
![Animated status bar style change](/images/status-bar-animation.gif)
You can easily support sarunw.com by checking out this sponsor.
![Offline Transcription:](/images/sponsor/icon_256x256.png)
Offline Transcription: Fast, privacy-focus way to transcribe audio, video, and podcast files. No data leaves your Mac.
Related Resources
Read more article about UIKit, Status Bar, UIStatusBarStyle, or see all available topic
Enjoy the read?
If you enjoy this article, you can subscribe to the weekly newsletter.
Every Friday, you'll get a quick recap of all articles and tips posted on this site. No strings attached. Unsubscribe anytime.
Feel free to follow me on Twitter and ask your questions related to this post. Thanks for reading and see you next time.
If you enjoy my writing, please check out my Patreon https://www.patreon.com/sarunw and become my supporter. Sharing the article is also greatly appreciated.
Become a patron Buy me a coffee Tweet ShareDifferent ways to check for String prefix in Swift
Learn how to get a prefix from a Swift string.
How to set cornerRadius for only some corners
Learn to round specific corners, e.g., top-left and top-right.